<template>
	<cl-drawer
		ref="drawer"
		:props="{
			title: `${editing ? '修改' : '添加'}代码`,
			size: '750px'
		}"
		show-confirm
		confirm-text="提交"
		@close="reset"
		@confirm="submit"
		:saving="saving"
	>
		<el-form ref="form" label-position="top" :model="form" :rules="rules" :disabled="saving">
			<el-form-item>
				<el-card shadow="never">
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="所属事业部" prop="biz_id">
								<cl-select
									v-model="form.biz_id"
									style="width: 100%"
									placeholder="请选择事业部"
									filterable
									:disabled="editing"
									@change="changeBiz"
								>
									<el-option
										v-for="item in business"
										:key="item.biz_id"
										:label="item.biz_name"
										:value="item.biz_id"
									/>
								</cl-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item ref="brand" label="品牌" prop="bra_id">
								<cl-select
									v-model="form.bra_id"
									placeholder="请选择品牌"
									style="width: 100%"
									filterable
								>
									<el-option
										:label="item.bra_name"
										:value="item.bra_id"
										v-for="(item, index) in bizRefData.brand"
										:key="index"
									/>
								</cl-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="代码标题" prop="name">
								<el-input v-model="form.name" placeholder="请输入代码标题" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="所属渠道" prop="channel_id">
								<cl-select
									v-model="form.channel_id"
									style="width: 100%"
									placeholder="请选择渠道"
									filterable
									@change="changeChannel"
								>
									<el-option
										v-for="item in sourceList"
										:key="item.id"
										:label="item.cname"
										:value="item.id"
									/>
								</cl-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="广告账户账号" prop="suppile_id">
								<cl-select
									v-model="form.suppile_id"
									style="width: 100%"
									placeholder="请选择广告账户账号"
									filterable
								>
									<el-option
										v-for="item in distributorList"
										:key="item.id"
										:label="item.supplie_id"
										:value="item.supplie_id"
									/>
								</cl-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="上报类型" prop="post_type">
								<cl-select
									v-model="form.post_type"
									style="width: 100%"
									placeholder="请选择上报类型"
									filterable
								>
									<el-option
										v-for="item in $const.BEHAVIOR_REPORTING_TYPE"
										:key="item.value"
										:label="item.label"
										:value="item.value"
									/>
								</cl-select>
							</el-form-item>
						</el-col>
						<template v-if="['tx_wechat', 'tx_web', 'qw_web', 'wb_web'].includes(form.post_type)">
							<el-col :span="12">
								<el-form-item label="广告主id" prop="account_id">
									<el-input
										v-model="form.account_id"
										placeholder="请输入广告主id"
									/>
								</el-form-item>
							</el-col>
							<el-col :span="12" v-if="form.post_type != 'wb_web'">
								<el-form-item label="广告主token" prop="access_token" v-if="form.post_type == 'bd_web'">
									<el-input
										v-model="form.access_token"
										placeholder="请输入广告主token"
									/>
								</el-form-item>
								<el-form-item label="数据源id" prop="user_action_set_id" v-else>
									<el-input
										v-model="form.user_action_set_id"
										placeholder="请输入数据源id"
									/>
								</el-form-item>
							</el-col>
						</template>
					</el-row>
				</el-card>
			</el-form-item>

			<el-form-item prop="behavior_business">
				<template #label>
					完成添加企业微信代码
					<span class="tips">(JS代码，不要随意填写，一般由第三方提供)</span>
				</template>
				<el-card shadow="never" body-style="padding:0">
					<div class="codemirror-box" style="height:100px">
						<codemirror v-model="form.behavior_business" :options="cmOptions" />
						<el-input style="display: none" v-model="form.behavior_business" />
					</div>
				</el-card>
			</el-form-item>

		</el-form>
	</cl-drawer>
</template>
<script>
const screen = window.screen;
export default {
	data() {
		return {
			form: {
				id: "",
				biz_id: "",
				bra_id: "",
				name: "",
				channel_id: "",
				suppile_id: "",
				behavior_business:"",
				post_type: "",
				account_id: "",
				user_action_set_id: "",
				access_token: ""
			},
			rules: {
				biz_id: [{ required: true, message: "请选择事业部" }],
				bra_id: [{ required: true, message: "请选择品牌" }],
				name: [{ required: true, message: "请填写代码标题" }],
				channel_id: [{ required: true, message: "请选择渠道" }],
				// suppile_id: [{ required: true, message: "请选择广告账户账号" }],
				post_type: [{ required: true, message: "请选择上报类型" }],
				// account_id: [{ required: true, message: "请填写广告主id" }]
			},
			saving: false,
			editing: false,
			// 渠道列表
			sourceList: [],
			// 广告账户账号列表
			distributorList: [],
			cmOptions: {
				tabSize: 4, // 缩进格式
				mode: "text/javascript",
				lineNumbers: true, // 显示行号
				// line: true,
				// styleActiveLine: true, // 高亮选中行
				hintOptions: {
					completeSingle: true // 当匹配只有一项的时候是否自动补全
				},
				lineWrapping: true, //代码折叠
				matchBrackets: true, //括号匹配
				// 添加折叠
				foldGutter: true,
				gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
			}
		};
	},
	computed: {
		bizRefData() {
			const { biz_id } = this.form;
			return this.getBizRefData(biz_id);
		}
	},
	created() {
		this.form.biz_id = this.getCurrBiz();
		this.init();
	},
	methods: {
		init() {
			this.getSourceList();
			this.getDistributorList();
		},
		open(editing = false, data = {}) {
			this.editing = editing;
			if (editing) {
				Object.keys(this.form).forEach(k => {
					this.form[k] = data[k];
				});
				if (!data.post_type) {
					this.form.post_type = "js_web";
				}
			}
			this.$refs.drawer.create();
			this.init();
		},
		close() {
			this.$refs.drawer.close();
		},
		reset() {
			this.saving = false;
			this.$refs.form?.resetFields?.();
			this.$resetFields(this.form);
			this.form.biz_id = this.getCurrBiz();
		},
		submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				this.saving = true;
				const res = await this.$service.ad[this.editing ? "behaviorEdit" : "behaviorAdd"](
					this.form
				).done(() => {
					this.saving = false;
				});

				this.$message.success("操作成功");
				this.$emit("confirm");
				this.reset();
				this.close();
				if (res.code_url) {
					// let win = window.open(
					// 	res.code_url,
					// 	" ",
					// 	`width=700,height=700,status=0,toolbar=0,location=0,left=${(screen.width -
					// 		700) /
					// 		2}`
					// );
					// win.onunload = () => {};
				}
			});
		},
		// 事业部切换
		changeBiz() {
			this.form.bra_id = "";
			this.form.channel_id = "";
			this.form.suppile_id = "";
			console.log("事业部切换");
			this.getBrand();
			this.getSourceList();
		},
		//获取品牌
		async getBrand() {
			const { biz_id } = this.form;
			const data = await this.getBizRefBrand(biz_id);
			this.form.bra_id = data.length == 1 ? data[0]?.bra_id ?? "" : "";
		},
		//获取来源渠道
		async getSourceList() {
			const { biz_id } = this.form;
			this.sourceList = [];
			if (!biz_id) return;
			const data = await this.$service.source.list({ biz_id });
			this.sourceList = data;
		},
		// 渠道切换
		changeChannel() {
			this.form.suppile_id = "";
			this.getDistributorList();
		},
		// 广告账户
		async getDistributorList() {
			const { biz_id, channel_id } = this.form;
			this.distributorList = [];
			if (!channel_id) return;
			const list = await this.$service.config.distributorLists({ biz_id, channel_id });
			this.distributorList = list;
		}
	}
};
</script>
<style lang="scss" scoped>
.tips {
	color: #aaa;
	font-size: 12px;
	em {
		color: red;
		font-style: normal;
	}
}
.codemirror-box {
	height: 250px;
	overflow: auto;
	.vue-codemirror {
		height: 100%;
	}
}
</style>
